<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="90px" slot="form" ref="formInline" :rules="rules">          
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="开始时间" prop="startDate">
                            <el-date-picker v-model="formInline.startDate" :editable="false" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间日期" @change="dateChange1" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结束时间" prop="endDate">
                            <el-date-picker v-model="formInline.endDate" :editable="false" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间日期" @change="dateChange2" :picker-options="formInline.pickerOptions2" style="width:100%"></el-date-picker>
                        </el-form-item> 
                    </el-col>             
                    <el-col :span="8">
                        <el-form-item label="操作人">
                            <el-input v-model="formInline.operate" placeholder="请输入操作人" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="系统名称">
                            <el-select v-model="formInline.systemName" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.systemNameList" :key="item.systemId" :label="item.systemName" :value="item.systemId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column prop="operationUserName" align="center" label="操作人"></el-table-column>

                <el-table-column prop="operationName" align="center" label="日志摘要"></el-table-column>
                
                <el-table-column prop="operationUserIp" align="center" label="IP地址"></el-table-column>

                <el-table-column prop="operationDuration" align="center" label="操作耗时">
                    <template scope="scope">
                        <span>{{scope.row.operationDuration}} ms</span>
                    </template>
                </el-table-column>

                <el-table-column label="系统名称" prop="systemName" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.systemName || '--' }}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="操作时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.operationTime || '--' }}</span>
                    </template>
                </el-table-column>        
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {pageSysOperationLog, listAllWebSystemInfo} from 'api/system';
import { mapState, mapActions, mapGetters } from 'vuex';
import moment from 'moment';
import TableLayout from 'components/TableLayout';
export default{
    components: {TableLayout, moment},
    data() {
        var validStart = (rule, value, callback) => {
            if (this.formInline.endDate) {
                this.$refs.formInline.validateField('endDate');
            } else {
                callback();
            }
        };
        var validEnd = (rule, value, callback) => {
            if (this.formInline.startDate && value) {
                if (value < this.formInline.startDate) {
                    return callback(new Error('结束时间必须大于等于开始时间'));  
                }
            } else {
                callback();   
            }
        };
        return {
            formInline: {// form表单数据
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间                                          
                pickerOptions1: {},
                pickerOptions2: {},
                operate: '',
                systemName: '0',
                systemNameList: []
            },
            dataApply: [],
            listQuery: {// 分页
                page: 1,
                total: 1000
            },
            rules: {
                startDate: [
                    { type: 'date', validator: validStart, trigger: 'change'}
                ],
                endDate: [
                    { type: 'date', validator: validEnd, trigger: 'change'}
                ]
            },
            loading: true
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.getSystemInfo();
        this.searchFetchData();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            };
        },

    // 功能：结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {    
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let startTemp = this.formInline.startDate == '' ? '' : moment(this.formInline.startDate).format('YYYY-MM-DD HH:mm:ss');
            let endTemp = this.formInline.endDate == '' ? '' : moment(this.formInline.endDate).format('YYYY-MM-DD HH:mm:ss');
            let json = {
                operationUserName: this.formInline.operate,
                beginTime: startTemp,
                endTime: endTemp,
                systemId: this.formInline.systemName,
                pagination: {
                    page: this.listQuery.page,
                    rows: this.config.pageSize
                }
            }
            pageSysOperationLog(json).then(response => {              
                this.dataApply = response.data.content.list;
                this.loading = false;
            });
        },
        getSystemInfo() {
            listAllWebSystemInfo().then(res => {
                this.formInline.systemNameList = res.data.content;
            })
        },
        // 表单查询
   
        onSubmit(formInline) {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        // 跳转
        checked(uId, pId) {
            this.$router.push({path: `checkParentManage/${uId}/${pId}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}
</style> 